
<meta charset="utf-8">

<div class="box" id="biz_signup_conatainer">
	<div class="box-header with-border">
		<form id="signupSearchForm" role="form" class="form-inline">
			<input type="hidden" name="metId" id="metId" v-model="searchForm.metId"   >
		</form>
	<div class="row">
	
			<div class="col-md-9">
				
				    			   <div class="box box-info">
									     <div class="box-body chart-responsive">
									              <div class="chart" id="line-chart" style="height:185px;"></div>
									       </div>
								</div>
									          
				</div>
				
			<div class="col-md-3">
					      <div class="small-box bg-yellow" >
				            <div class="inner">
				              <h3>44人</h3>
				              <p>累计报名人数</p>
				            </div>
				            <div class="icon">
				              <i class="ion ion-person-add"></i>
				            </div>
				            
				          </div>
				              <div class="info-box">
					            <span class="info-box-icon bg-aqua"><i class="ion ion-ios-people-outline"></i></span>
					
					            <div class="info-box-content">
					              <span class="info-box-text">今日报名人数</span>
					              <span class="info-box-number">2人</span>
					            </div>
					            <!-- /.info-box-content -->
					          </div>
          
			</div>
				
	</div>

			          
			          
			          
			            
	</div>
	<div class="box-body">
		<div class="row">
			<div class="col-md-12">
					 <div class="btn-group " id="signupTableToolbar" role="group">
						<button type="button" v-kperms="{perm:''}" class="btn btn-default" v-on:click="setStatus(-1)">
						<i class="glyphicon glyphicon-trash" aria-hidden="true"></i> 删除报名
					</button>
					</div>
					<table id="signupBootstrapTable" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
</div>
<script>

    
var signup_list_main=new Vue({  
	  el: '#biz_signup_conatainer',
	  data:{
		  searchForm: {
			  metId: null,
		  },
		  metId:null,
		  bus:new Vue(),
	  },
	  mounted:function(){
		  var _this=this;
		  _this.metId=zfesRoutie.getUrlPatam("metId");
		  _this.searchForm.metId=_this.metId;
		  _this.initMirros();
		  
		_this.initTable( _this.metId);
	  },
    methods: {
  	  initTable: function(metId){
  		var _this=this;
  		var ajaxUrl="/met/service/tenant/signupDefine/signupModelJsonDtolList";
  		zfesAjax.ajaxTodo(ajaxUrl, { "metId" : metId}, function(data) {
			var smList =data.data.signupModelJsonDtolList;
			var columns=new Array();
			if(smList){
				columns.push({checkbox:true,width:20});
				$.each(smList,function(index,node){
					if(node.type=='file'){
						  return ;
					}
					if(index>10){
						return false;
					}
					
					columns.push({field:node.name,title:node.label,width:200});
				});
				columns.push({field:'',title:'详情',formatter:_this.formatDetailEntry});
			var url="/met/service/tenant/signupDefine/loadSignupDataSet";
			zfesBstable.laodTable($("#signupBootstrapTable"),$("#signupSearchForm"),$("#signupTableToolbar"),url,columns,this.searchForm); 
			}
			
		}); 
  	  },
  	
  	  search:function(){
  		  zfesBstable.reload($("#signupBootstrapTable")); 
  	  },
  	  refresh:function(){
  		  zfesBstable.refresh($("#signupBootstrapTable"));
  	  },
  	  entrySignupDetail:function(signupId){
  		var _this=this;
  		 var url="/views/tenant/signup/signup.detail.html";
  		 zfesLayerEditDg.open(url,{"metId": _this.metId,"signupId":signupId},"报名详情",560,function(){});
  	  },
  	formatDetailEntry: function(value, row, index){
	  		var _this=this;
	  		return '<a href="javascript:void(0)"><span  class="label label-success" onClick="entrySignupDetail('+row.id+')">报名详情</span></a>';
	  	},
 	  initMirros: function(){
   		 var line = new Morris.Line({
   		      element: 'line-chart',
   		      resize: true,
   		      data: [
   		        {y: '2011 Q1', item1: 20},
   		        {y: '2011 Q2', item1: 10},
   		        {y: '2011 Q3', item1: 2},
   		        {y: '2011 Q4', item1: 1},
   		        {y: '2012 Q1', item1: 3},
   		        {y: '2012 Q2', item1: 45},
   		        {y: '2012 Q3', item1: 4},
   		        {y: '2012 Q4', item1: 3},
   		        {y: '2013 Q1', item1: 2},
   		        {y: '2013 Q2', item1: 20}
   		      ],
   		      xkey: 'y',
   		      ykeys: ['item1'],
   		      labels: ['Item 1'],
   		      lineColors: ['#3c8dbc'],
   		      hideHover: 'auto'
   		    });
   	  },
   	
   }
});
function entrySignupDetail(signupId){
	signup_list_main.entrySignupDetail(signupId);
}

</script>


